<template>
  <div class="form-group" :class="fix">
      <label :class="!upTable ? 'labelSize':'control_up_label'"><span class="required" v-if="required">*</span>{{title}}：</label>
      <textarea :type="type" :name="name" class="form-control" :id="name" :placeholder="placeholder"
                :readonly="readOnly" :class="{'select-read-only': readOnly}" v-model="value"
                :maxlength="maxlength" :style="styles | style-filter upTable"
      ></textarea>
      <div class="textarea-error"></div>
      <!-- <input type="text" class="form-control" v-model="value" :type="type" :name="name" :id="name"v-else> -->
  </div>
</template>
<style scoped>
    .textarea-error{
        position: relative;
        top:-35px;
        width:125%
    }

  textarea{
    resize:none;
  }
</style>

<script>
import {randomId} from "./general";

export default {
    data:() => ({
        id:randomId()
    }),
	computed: {
        fix(){
            if(this.upTable){
                return "fix_height"
            }  else{
                return "fix_min_width"
            }
        },
    },
    props: {
        title:{type: String},
        type:{type: String, default:"text"},
        name: String,
        value: {type: String, default: ""},
        placeholder: {type: String, default: ""},
        readOnly: {type: Boolean, default: false},
		maxlength: {default: "10000"},
		required:{type: Boolean,default: false},
        upTable:{type:Boolean, default:false},
        styles:{type: String, default: "height:100px;width:265px"}
    },
    methods:{
        reset(){
            this.value = "";
        }
    },
    filters:{
        styleFilter: (value, e) => e ? ((value === "width:265px"|| value==="width:265px;") ? "" :value || "") : value

    }
}
</script>
